<template>
  <div class="major-event-list-content">
     <div style="margin-top:7.5px;width:100%;height:4px;display: flex;justify-content: center;">
       <div class="top-line"></div>
      </div>
    <div class="list-wrap" ref="listWrap">
      <div class="list-item" v-for="(item,index) in eventlist" :key="index" @click="showDetail(item,index)">
        <p class="title">{{item.projectName}}</p>
        <div class="info">
            <p class="desc" style="">{{item.cityProjectTypeDesc}}</p>
            <p class="desc" style="margin-left:10px">{{item.provinceProjectTypeDesc}}</p>
          </div>
         <div class="flex info-bottom">
             <!-- 实际开工时间 -->
            <p>开工时间 {{item.projectActStartTime || '-'}}</p>  
            <div class="split-line"></div>
            <p>投资金额 {{item.projectTotalInvest || '-'}}</p>
            <span style="margin-left:2px" class="num">{{item.projectTotalInvestUnit=='1'?'元':item.projectTotalInvestUnit=='2'?'万元':item.projectTotalInvestUnit=='3'?'亿':''}}</span>
          </div>
          <!-- <van-overlay :show="isShow" @click="show = false"> -->
        <!-- <projectDetail v-show="isShow" :detailData="detailData"></projectDetail> -->
        <!-- </van-overlay> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, toRefs, watch, onActivated, onMounted,watchEffect } from 'vue'
import { showImagePreview } from 'vant'
import projectDetail from './projectDetail.vue'
import { useRouter } from 'vue-router'

defineOptions({
  name: 'projectList'
})

const props = defineProps({
  list: {
    type: Array,
    default: []
  },
    activeTab: {
    type: Number,
    default: 0
  },   
})

const router = useRouter()
const eventlist = ref([])
const activeIndex = ref(null)
const currentTab = computed(() => {
  return props.activeTab
})
const viewportHeight = ref(0);

watchEffect(() => {
  let height = window.innerHeight || document.documentElement.clientHeight
  viewportHeight.value = height - 350;
});

watch(
  () => props.list,
  (val) => {
    if(val.length>0){
      eventlist.value = val;
    } else {
      eventlist.value = [];
    }
  }
);
const isShow = ref(false)
const detailData = ref({})

const showDetail = (item:Object,index:Number) =>{
  isShow.value = true;
  detailData.value = item;
  goPage();
}
const goPage =() => {
    router.push({
      name:'projectDetail',
      query:{...detailData.value}
    })
  }
</script>

<script lang="ts">

</script>

<style lang="less" scoped>
.major-event-list-content{
  border-radius: 10px;
  background: #FFFFFF;
  color: #212121;
  box-shadow: 0px 3px 10px 7px #00000010;
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  // max-height: 73vh;
  padding-bottom: 10px;
  z-index: 999;
  .top-line {
    width: 30px;
    height: 4px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 4px;        
  // margin: 0 10px 0 10px;
    }
  .list-title{
    color: #0E0D16;
    font-weight: bold;
    font-size: 18px;
    padding: 18px 0 15px;
    border-bottom: 1px solid #eaeaea;
    text-align: center;
  }
  .list-wrap{
    max-height: calc(100vh - 260px);
    // height: 73vh;
    overflow: auto;
    padding: 20px 15px 20px;
    

  }
  .list-item{
    padding: 8px 0 0;
    border-bottom: 1px solid #eaeaea;
    &:last-child{
      border: none;
    }
    .title{
      color: #0E0D16;
      font-weight: bold;
      font-size: 15px;
      line-height: 20px;
    }
    .info{
      border-radius: 6px;
      padding: 12px 0 0 0px;
      font-size: 12px;
      line-height: 22px;
      .desc {
        color: #ff8326;
        font-size: 11px;
        font-family: 'PingFang SC';
        background-color: rgba(255,131,38,0.1);
        display:inline-block;
        padding:0 10px;
        border-radius: 5px;
      }
    }
    .info-bottom {
      padding: 10px 0 15px 0px;
      font-size: 12px;
      font-family: 'PingFang SC';
      color:#626262;
      .split-line {
        width: 1px;
        height: 11px;
        background-color: #eaeaea;
        margin: 0 10px 0 10px;
      }
    }
    .detail{
      padding-bottom: 10px;
      .desc{
       font-size: 14px;
       line-height: 22px;
    }
    }

    .images{
      margin-top: 7px;
      display: flex;
      flex-wrap: wrap;
      img{
        border-radius: 5px;
        width: 72px;
        height: 72px;
        margin: 0 7px 7px 0;
        &:nth-child(4n){
            margin-right: 0;
        }
      }
    }
    .icon-zhankai{
      margin-bottom: 10px;
      transition: all 0.3s;
      img{
        width: 24px;
        height: 24px;
      }
      &.shouqi{
        transform: rotate(-180deg);
      }
    }
  }
}
</style>

